/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

.user-environ,
.browse-area,
.edit-area,
.editor {
    position: absolute;
}

.editor {
    border-radius: $basicCr * 1.5;
}

.contents {
    $myM: 0;
    box-sizing: border-box;
    position: absolute;
    top: $myM;
    right: $myM;
    bottom: $myM;
    left: $myM;
    &.nomargin {
        $myM: 0px;
        right: $myM;
        bottom: $myM;
        left: $myM;
    }
}


.status-holder {
    text-transform: uppercase;
}

.s-ue-bottom-bar {
    background: $colorStatusBarBg;
    color: $colorStatusBarFg;
    cursor: default;
    font-size: .7rem;
}

.user-environ {
    height: 100%;
    width: 100%;
    overflow: hidden !important;
    .browse-area,
    .editor {
        top: 0; left: 0; right: 0; bottom: $ueFooterH;
    }

    .browse-area,
    .edit-area {
        > .contents {
            left: 0;
            right: 0;
        }
    }

    .edit-area {
        $tbH: $btnToolbarH + $interiorMargin;
        top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
        left: $bodyMargin;
        right: $bodyMargin;
        bottom: $bodyMargin + $ueFooterH;
        .tool-bar {
            bottom: auto;
            height: $tbH;
            line-height: $btnToolbarH;
        }
        .object-holder.work-area {
            top: $tbH + $interiorMargin * 2;
            overflow: auto;
        }
    }

    .l-ue-bottom-bar {
        $m: $interiorMarginSm;
        @include absPosDefault(0, $overflow: visible);// New status bar design
        top: auto;
        height: $ueFooterH;
        line-height: $ueFooterH - ($m * 2);
        .status-holder {
            box-sizing: border-box;
            @include absPosDefault($m, $overflow: visible);
            right: 120px;
            z-index: 10;
        }
        .app-logo {
            background-position: right center;
            box-sizing: border-box;
            @include absPosDefault($interiorMargin - 1);
            cursor: pointer;
            left: auto; right: $interiorMargin;
            width: $ueAppLogoW;
            z-index: 2;
        }
    }
}

.edit-mode {
    // Old edit mode
    .split-layout {
        .split-pane-component.pane.right {
            width: 15%;
            .pane.bottom {
                min-height: 50px;
                height: 30%;
            }
        }
    }
}

.pane {
    box-sizing: border-box;
    position: absolute;

    .pane-header {
        text-transform: uppercase;
        height: $ueTopBarH;
        line-height: $ueTopBarH;
    }

    .t-object.primary-pane {
        // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
        z-index: 4;
    }

    .mini-tab-icon.toggle-pane {
        z-index: 5;
    }
}

body.desktop .pane .mini-tab-icon.toggle-pane {
    $hi: splitterHandleInset($splitterD, $splitterHandleD);
    $paneExpandedOffset: $hi + $splitterHandleD + $uePaneMiniTabW;
    top: 0;

    &.toggle-tree.anchor-left.collapsed,
    &.toggle-inspect.anchor-right:not(.collapsed) {
        @extend .icon-arrow-right;
        border-bottom-right-radius: $controlCr;
    }

    &.toggle-tree.anchor-left:not(.collapsed),
    &.toggle-inspect.anchor-right.collapsed {
        @extend .icon-arrow-left;
        border-bottom-left-radius: $controlCr;
    }

    &.toggle-tree.anchor-left {
        left: 0;
        transform: translateX(-1 * $paneExpandedOffset);
        &.collapsed {
            transform: translateX(-1 * $ueCollapsedPaneEdgeM);
        }
    }

    &.toggle-inspect.anchor-right {
        right: 0;
        transform: translateX($paneExpandedOffset);
        &.flush-right {
            transform: translateX(($uePaneMiniTabW + ceil($splitterD / 2)));
        }
        &.collapsed {
            transform: translateX($ueCollapsedPaneEdgeM);
        }
    }
}

.split-layout {
    // Specific elements margins
    .holder.holder-treeview-elements {
        top: $bodyMargin;
        right: 0;
        bottom: $interiorMargin;
        left: $bodyMargin;
        .create-button-holder {
            &.s-status-editing {
                display: none;
                & + .search-holder .search-bar {
                    // .search-holder is adjacent sibling to .create-button-holder
                    // Add right margin when create button is hidden, to make room for the collapse pane 'x' button
                    margin-right: $interiorMarginLg * 2;
                }
            }
        }
    }

    .holder.holder-object-and-inspector {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        .holder-object {
            top: $bodyMargin;
            bottom: $interiorMargin;
            // Clip element that have min-widths
            overflow: hidden;
        }
        .holder-inspector {
            top: $bodyMargin;
            bottom: $interiorMargin;
            left: $bodyMargin + $interiorMargin;
            right: $bodyMargin;
        }
        .holder-elements {
            top: 0;
            bottom: $interiorMargin;
            left: $bodyMargin;
            right: $bodyMargin;
        }
    }
}

.object-holder {
    @include absPosDefault(0, auto);
    top: $ueTopBarH + $interiorMarginLg;
}

.l-object-wrapper {
    padding: 0;
    @include trans-prop-nice((padding), 0.25s);
    .l-edit-controls {
        @include trans-prop-nice((height), 0.5s);
        height: 0;
    }
}

.top-bar .buttons-main .s-button,
.top-bar .s-menu-button,
.tool-bar .s-button,
.tool-bar .s-menu-button,
.tool-bar .select,
.tool-bar .input-labeled {
    $h: $btnToolbarH;
    height: $h;
    line-height: $h;
    vertical-align: top;
}

.object-browse-bar {
    .l-object-action-buttons {
        margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
    }
}

/***************************************************** OBJECT BROWSE BAR */
.object-browse-bar {
    box-sizing: border-box;
    height: $ueTopBarH;
    line-height: $ueTopBarH;
    white-space: nowrap;

    .left {
        .l-back {
            a {
                display: inline-block;
                text-align: center;
                width: 24px;
            }
            margin-right: $interiorMargin;
            &.s-status-editing { display: none; }
        }
    }
}

// When the tree is hidden, these are the classes used for the left menu and the right representation.
.pane-tree-hidden {
    // Sets the left tree menu when the tree is hidden.
    .tree-holder,
    .splitter-treeview,
    .holder-treeview-elements {
        opacity: 0;
        pointer-events: none;
    }
}

.pane-tree-showing {
    // Sets the left tree menu when the tree is shown.
    .tree-holder,
    .splitter-treeview {
        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
        opacity: 1;
    }

    .holder-treeview-elements {
        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
    }
}

.pane-inspect-showing {
    .l-object-and-inspector {
        .l-inspect,
        .splitter-inspect {
            @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
            opacity: 1;
        }
    }
}

.pane-inspect-hidden {
    .l-object-and-inspector {
        .l-inspect,
        .splitter-inspect {
            opacity: 0;
            pointer-events: none;
        }
    }
}

body.desktop {
    .holder-all {
        min-width: $ueDesktopMinW;
    }
    .split-layout {
        .split-pane-component.pane {
            &.treeview.left {
                min-width: $ueBrowseLeftPaneTreeMinW;
                max-width: $ueBrowseLeftPaneTreeMaxW;
                width: $ueBrowseLeftPaneTreeW;
            }
            &.t-inspect.right {
                min-width: $ueBrowseRightPaneInspectMinW;
                max-width: $ueBrowseRightPaneInspectMaxW;
                width: $ueBrowseRightPaneInspectW;
                z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
            }
        }
    }
    .pane.treeview.left .tree-holder {
        padding-right: $interiorMargin;
    }
    .pane-tree-hidden {
        .pane.right.primary-pane { left: $ueCollapsedPaneEdgeM !important; }
    }
    .pane-inspect-hidden .l-object-and-inspector {
        .pane.left { right: $ueCollapsedPaneEdgeM !important; }
    }
    .pane:not(.resizing) {
        @include trans-prop-nice-resize-w(250ms);
    }
    .pane.primary-pane > .object-browse-bar {
        min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
    }
}

.s-status-editing {
    .l-object-wrapper {
        background-color: $colorEditAreaBg;
        border-radius: $controlCr;
        border: 1px dotted $colorEditAreaFg;
        padding: $interiorMargin;

        .l-edit-controls {
            height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin;
            border-bottom: 1px solid $colorInteriorBorder;
            .tool-bar {
                right: $interiorMargin;
            }
        }
    }
}
